<template>
  <div :class="{container: true, model: vari}">
    <div class="inner-left-container">
      <div class="login-container">
        <h1 style="font-size: 25px; color: bisque; padding: 10px">VV影视票务网</h1>
        <el-button type="danger" @click="onClick" size="large">去注册</el-button>
      </div>
      <img src="@/assets/login-bg.svg" class="image">
    </div>
    <div class="inner-right-container">
      <div class="register-container">
        <h1 style="font-size: 25px; color: bisque; padding: 10px">VV影视票务网</h1>
        <el-button type="danger" @click="onClick" size="large">去登录</el-button>
      </div>
      <img src="@/assets/register-bg.svg" class="image">
    </div>
    <div class="inner-sign-up-container">
      <login :class="{'model': vari}"></login>
      <register :class="{'model': vari}"></register>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import login from './login.vue'
import register from './register.vue'

  let vari = ref<boolean>(false)
  const onClick = () => {
    vari.value = !vari.value
  }
</script>

<style scoped>
  .container{
    width: 100vw;
    height: 100vh;
    background-color: white;
    overflow: hidden;
    position: relative;
    display: flex;
  }
  .container::before{
    content: "";
    width: 1800px;
    height: 1800px;
    background-color: rgb(135, 206, 235);
    position: absolute;
    border-radius: 50%;
    transform: translateY(-50%);
    right: 48%;
    top: -15%;
    transition: 1.3s ease-in-out;
    z-index: 2;
  }
  .inner-left-container{
    width: 0;
    flex: 1;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    padding: 3rem 10% 2rem 10%;
    pointer-events: all;
  }
  .inner-right-container{
    width: 0;
    flex: 1;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    padding: 3rem 10% 2rem 10%;
    pointer-events: none;
  }
  .container .inner-right-container .register-container,
  .container .inner-right-container .image{
    transform: translateX(1000px);
    transition: 1.3s ease-in-out;
    transition-delay: 0.3s;
  }
  .container .inner-left-container .login-container,
  .container .inner-left-container .image{
    transform: translateX(0px);
    transition: 1.3s ease-in-out;
  }

  .inner-sign-up-container{
    width: 50%;
    height: 50%;
    position: absolute;
    right: 0;
    top: 20%;
    transition: 1s ease-in-out;
    transition-delay: 0.3s;
    display: grid;
    grid-template-columns: 1fr;
  }

  .image{
    width: 100%;
  }

  .container.model::before{
    transform: translate(100%, -50%);
    transition: 1.3s ease-in-out;
    right: 55%;
    background: rgb(127, 255, 212);
  }
  .container.model .inner-right-container .register-container,
  .container.model .inner-right-container .image{
    transform: translateX(0px);
    transition: 1.3s ease-in-out;
  }
  .container.model .inner-left-container .login-container,
  .container.model .inner-left-container .image{
    transform: translateX(-1000px);
    transition: 1.3s ease-in-out;
    transition-delay: 0.3s;
  }
  .container.model .inner-sign-up-container{
    width: 50%;
    height: 50%;
    top: 20%;
    right: 50%;
    transition: 1s ease-in-out;
    transition-delay: 0.3s;
  }
  .container.model .inner-right-container{
    pointer-events: all;
  }
  .container.model .inner-left-container{
    pointer-events: none;
  }
</style>